<template>
  <div class="margin-container-list">

    <!-- 平台类型 -->
    <third-platform-head :showDouYinIcon="false"
      :showTaoBaoIcon="false"
      :showPinDuoDuoIcon="false"
      :showTmallIcon="false"
      @platformTypeChange="platformTypeChange">
    </third-platform-head>
    
    <!--顶部搜索 -->
    <div class="top-operate pad-t-15">
      <div>
        <div class="pad-t-10">
          <el-select v-model="shopId" placeholder="所属店铺">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>
          <el-button type="primary" class="mar-l-10" @click="syncTemplate">同步快递模板</el-button>
          <el-input style="width: 200px" v-model="searchListQuery.templateName" placeholder="请输入快递模板名称"></el-input>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container">
      <el-table ref="multipleTable" :data="dataList" v-loading="listLoading" row-key="categoryId" :tree-props="{hasChildren: 'hasChildren'}" element-loading-text="加载中">
        <el-table-column label="运费模板名称" prop="templateName">
          <template slot-scope="scope">
            <span>{{ scope.row.templateName }}</span><br/>
          </template>
        </el-table-column>
        <el-table-column label="区域">
          <template slot-scope="scope">
            <span>{{scope.row.sendProvinceName}} - {{scope.row.sendCityName}} - {{scope.row.sendDistrictName}}</span><br/>
          </template>
        </el-table-column>
        <el-table-column label="计费类型" prop="calType">
          <template slot-scope="scope">
            <span>{{dict.calType[scope.row.calType.toString()]}}</span><br/>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="searchListQuery.currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import thirdAuth from '../components/third-auth'
  import thirdPlatformHead from '../components/third-platform-head'
  import { listThirdShop } from '@/api/user/third-shop'
  import { pageTemplate, doSyncTemplate } from '@/api/sell/third-express-template'
  export default {
    components: { thirdPlatformHead },
    mixins: [thirdAuth],
    data() {
      return {
        // 查询条件
        searchListQuery: {
          currentPage: 1,
          size: 10,
          templateName: ''
        },
        // 平台类型
        platformType: 2,
        // 店铺id
        shopId: '',
        listLoading: false,
        // 店铺集合
        shopList: [],
        // 运费模板列表
        dataList: [],
        total: 0,
        dict: {
          calType: {}
        }
      }
    },
    // 初始化页面
    created() {
      this.initListThirdShop()
    },
    mounted() {
    },
    methods: {
      // 平台类型切换事件
      platformTypeChange(platformType) {
        this.platformType = platformType
        this.initListThirdShop()
      },
      // 获取第三方店铺列表
      initListThirdShop() {
        const params = {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          platformType: this.platformType
        }
        listThirdShop(params).then(response => {
          if (response.isError) return
          if (response.data) {
            this.shopId = response.data[0] && response.data[0].shopId
            this.shopList = response.data
          }
          if (this.shopId) {
            this.init()
          }
        })
      },
      // 获取抖音分类列表
      init() {
        const redirectUrl = '/#/' + (this.getMemberId() ? 'shop' : 'channel') + '/express-template/index?platformType=' + this.platformType
        // 校验access_token是否存在
        this.checkAccessToken(this.platformType, this.shopId, redirectUrl, false).then(response => {
          if (response) {
            this.searchListQuery.enterpriseId = this.getEnterpriseId()
            this.searchListQuery.shopId = this.shopId
            this.searchListQuery.platformType = this.platformType
            pageTemplate(this.searchListQuery).then(response => {
              if (response.isError) return
              this.listLoading = false
              this.dataList = response.data.records
              this.total = response.data.total
              this.dict = response.data.dict
            })
          }
        })
      },
      // 查询事件
      handleSearch() {
        this.init()
      },
      // 重置事件
      resetSearch() {
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          enterpriseId: this.getEnterpriseId(),
          shopId: this.shopId,
          platformType: this.platformType,
          templateName: ''
        }
        this.init()
      },
      // 同步抖音分类
      syncTemplate() {
        const redirectUrl = '/#/' + (this.getMemberId() ? 'shop' : 'channel') + '/express-template/index?platformType=' + this.platformType
        // 校验access_token是否存在
        this.checkAccessToken(this.platformType, this.shopId, redirectUrl, true).then(response => {
          if (response) {
            this.$confirm('下载数据量可能会比较大，需要耐心等候处理，确定下载？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const data = {
                shopId: this.shopId,
                memberId: this.getMemberId(),
                enterpriseId: this.getEnterpriseId(),
                platformType: this.platformType
              }
              doSyncTemplate(data).then(response => {
                if (response.isError) return
                this.$message({ type: 'success', message: '成功!' })
                this.init()
              })
            }).catch(() => {
              this.$message({ type: 'info', message: '已取消' })
            })
          }
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 90px;
    height: 90px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }
</style>
